<ion-header class="study-list-header">
  <ion-navbar>
    <!-- <ion-buttons start>
      <button class="navbar-btn navbar-btn-back" ion-button icon-only navPop>
        <ion-icon md="ios-arrow-back" ios="ios-arrow-back"></ion-icon>
      </button>
    </ion-buttons> -->
    <div class="search-bar-wrap">
      <div class="search-bar-container">
        <div class="search-icon">
          <ion-icon ios="md-search" md="md-search"></ion-icon>
        </div>
        <ion-input type="search" [(ngModel)]="keywordInput" placeholder="请输入您要搜索的内容" (keyup)="searchNow($event)"></ion-input>
        <div class="search-icon close-icon" (click)="clearSearchInput()">
          <ion-icon ios="ios-close-circle-outline" md="ios-close-circle-outline"></ion-icon>
        </div>
      </div>
    </div>
    <ion-buttons end>
      <button class="navbar-btn navbar-btn-more" 
      (click)="toggleClassTypeListModal()" 
      [ngClass]="{'show-class-modal':showClassTypeFlag}">
        <span>分类</span>
        <ion-icon ios="ios-arrow-down" md="ios-arrow-down"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <div class="class-type-modal" *ngIf="showClassTypeFlag">
    <ul class="class-type-list">
      <li class="class-type-item" 
      *ngFor="let typeItem of classTypeConfig" 
      [ngClass]="{'expand':typeItem.isExpand}" 
      (click)="expandClassType(typeItem)">
        <div class="class-type-title">
          <h4>{{typeItem.title}}</h4>
          <ion-icon ios="ios-arrow-down" md="ios-arrow-down"></ion-icon>
        </div>
        <ul class="class-type-sub-list">
          <li class="class-type-sub-item" 
            (click)="selectClassTypeItem(subTypeItem.id)" 
            *ngFor="let subTypeItem of typeItem.sub" 
            [ngClass]="{'selected':subTypeItem.id==classTypeId}"
          >
            {{subTypeItem.name}}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新..." refreshingSpinner="circles" refreshingText="请稍等..."> </ion-refresher-content>
  </ion-refresher>

  <ul class="study-list">
    <li class="study-item" *ngFor="let item of studyList" (click)="goStudyDetail(item.Id)">
      <div class="study-item-container">
        <img class="container-img" [src]="item.PicUrl| imgUrl:'DynamicUrl'" alt="">
        <div class="container-mask">
          <div class="mask-top">
            <div class="study-price">
              <div>来战价:¥{{item.SellPrice}}</div>
              <div class="vip-price">
                <span class="price-tag">VIP:¥{{item.SellPrice}}</span>
              </div>
            </div>
            <div class="study-title">
              <span>{{item.Title}}</span>
            </div>
          </div>
          <div class="mask-bottom">
            {{item.Id}}人学习
          </div>
        </div>
      </div>
    </li>
  </ul>
</ion-content>
<ion-footer>
  <ion-toolbar class="common-toolbar-footer">
    <div class="haokur-tab-bar">
      <ul class="tab-bar-list">
        <li class="tab-bar-item" [ngClass]="{'active':typeActive==0}">
          <div href="javascript:;" (click)="tabStudyType(0)">
            <img class="static-icon" src="./assets/imgs/study/time.svg" alt="">
            <img class="active-icon" src="./assets/imgs/study/time-active.svg" alt="">
            <p>时间</p>
          </div>
        </li>
        <li class="tab-bar-item" [ngClass]="{'active':typeActive==1}">
          <div href="javascript:;" (click)="tabStudyType(1)">
            <img class="static-icon" src="./assets/imgs/study/hot.svg" alt="">
            <img class="active-icon" src="./assets/imgs/study/hot-active.svg" alt="">
            <p>人气</p>
          </div>
        </li>
        <li class="tab-bar-item" [ngClass]="{'active':typeActive==2}">
          <div href="javascript:;" (click)="tabStudyType(2)">
            <img class="static-icon" src="./assets/imgs/study/price.svg" alt="">
            <img class="active-icon" src="./assets/imgs/study/price-active.svg" alt="">
            <p>价格</p>
          </div>
        </li>
      </ul>
    </div>
  </ion-toolbar>
</ion-footer>
<ion-backdrop [hidden]="!showClassTypeFlag" (click)="hideClassTypeListModal()" class="product-detail-backdrop" disable-activated=""
  role="presentation" tappable="" style="opacity: 0.2;"></ion-backdrop>